import { defineComponent, watchEffect, shallowReactive } from 'vue'
// import { useHomeStore } from '@/store'
// import { storeToRefs } from 'pinia'

// 声明类型
const PropsType = {
  totalPrice: {
    type: Number,
    default: 0
  },
  colorObj: {
    type: Object,
    default: () => ({
      textStyle: "#3fc0fb",
      series: {
        color: ["#00bcd44a", "transparent"],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5"
        }
      }
    })
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 配置项
    let options = shallowReactive({grid:null,series:null})

    // const home = useHomeStore();
    // home.greenSellOperIncome();

    watchEffect(() => {
        // const { salesOper } = storeToRefs(home);
        // const num = +salesOper.value?.totalSellOperIncome?.totalTkPrice || 0;
        options = {
          grid: {
            containLabel: true,
            top: '1%',
            bottom: '1%',
          },
          series: {
              type: 'gauge',
              center: ['50%', '60%'],
              min: 0,
              max: 60,
              splitNumber: 12,
              itemStyle: {
                color: '#FFAB91'
              },
              progress: {
                show: true,
                width: 20
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.25, '#28c6e6'],
                    [0.5, '#43c8d5'],
                    [0.75, '#f9c276'],
                    [1, '#430981']                    
                  ],
                }
              },
              axisTick: {
                distance: -45,
                splitNumber: 5,
                lineStyle: {
                  width: 2,
                  color: '#fff'
                }
              },
              splitLine: {
                distance: -52,
                length: 14,
                lineStyle: {
                  width: 3,
                  color: [
                    [0.25, '#28c6e6'],
                    [0.5, '#43c8d5'],
                    [0.75, '#f9c276'],
                    [1, '#430981']
                  ]
                }
              },
              axisLabel: {
                show: false,
                // distance: -20,
                // color: '#999',
                // fontSize: 20
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                fontSize: 20,
                fontWeight: 'bolder',
                formatter: `{value}\n营业收入合计`,
                color: '#fff',
              },
              data: [
                {
                  value: +props.totalPrice
                }
              ]
            },
        }
    })

    return () => {
      const height = "300px"
      const width = "300px"

      return <div>
        <echart options={options} height={height} width={width} />
      </div>
    }
  }
})

